<template>
  <div class="vip-points-mall">
    <!-- 头部 -->
    <div class="top">
      <app-main-title title="积分商城" />
      <!-- Tips-->
      <div class="top-tips app-main-tips-box">
        <div class="title">
          <i class="el-icon-warning" /> 说明
        </div>
        <ul>
          <li>1.积分商城上架的优惠券因为有独立的库存和兑换规则，所以不可使用优惠券管理中已经创建好的优惠券，系统将在你创建好兑换商品后自动创建一张符合要求的优惠券。</li>
          <li>2.已上架的优惠券、商品，用户可兑换时间的时间只可以扩大而不可以缩小， 如果需要提前终止兑换可以做下架处理。</li>
          <li>3.如果你需要查看顾客的兑换明细，请点击【
            <a
              href
              class="btn"
              @click.prevent="goStatementPointsMallRecord"
            >
              <u>报表中心>积分报表>积分商城兑换明细</u>
            </a>
            】查看。
          </li>
        </ul>
      </div>
    </div>

    <!-- tab -->
    <div class="tab">
      <el-tabs v-model="tabName">
        <el-tab-pane label="上架管理" name="mall">
          <points-mall-list :tab-name="tabName" />
        </el-tab-pane>
        <el-tab-pane v-if="!$store.getters.banBtnList.includes('TAB_POINTS_CONFIG')" label="功能设置" name="config">
          <points-mall-config :tab-name="tabName" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PointsMallList from './components/PoinstMallList'
import PointsMallConfig from './components/PoinstMallConfig'
export default {
  components: {
    PointsMallList,
    PointsMallConfig
  },
  data() {
    return {
      tabName: 'mall'
    }
  },
  methods: {
    /**
       * 按钮组
       */
    // 跳转积分商城兑换明细
    goStatementPointsMallRecord() {
      this.$router.push({
        name: 'StatementPointsMallRecord'
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .top {
    padding: 24px 30px;
    border-radius: 5px 5px 0 0;
    background-color: #fff;
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  /* reset element*/
  .vip-points-mall {
    .tab {
      .el-tabs__header {
        padding-left: 30px;
        margin-bottom: 10px;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
      }
      .el-tabs__nav-wrap::after {
        background-color: #fff;
      }
      .el-tabs__active-bar {
        height: 4px;
      }
    }
  }
</style>
